<template>
  <div class="payoff">
    <div class="top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'cart' }">购物车</el-breadcrumb-item>
        <el-breadcrumb-item>支付订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
     <div class="cont">
        <div class="cont-l">
            <i class="el-icon-success"></i>
            <div>
                <p class="title">订单提交成功！请尽快完成支付</p>
                <p>支付还剩28分40秒，超时后将取消订单</p>
            </div>
        </div>
        <div class="cont-r">
            应付金额：<span class="price">￥{{this.allprices}}</span>
        </div>
     </div>
     <div class="bottom">
        <p class="title">选择以下支付方式付款</p>
        <div class="bot-div">
            <p class="pingtai">支付平台</p>
            <el-button type="success">微信支付</el-button>
            <el-button type="primary"><a class="btn-a" href="https://excashier.alipaydev.com/standard/auth.htm?payOrderId=2aecf98e1ddb483796028940f42503c8.00#orderList">支付宝</a></el-button>
        </div>
        <div class="bot-div">
            <p class="pingtai">支付方式</p>
            <el-button>招商银行</el-button>
            <el-button>工商银行</el-button>
            <el-button>建设银行</el-button>
            <el-button>农业银行</el-button>
            <el-button>交通银行</el-button>
        </div>
     </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            allprices:0
        } 
    },
  mounted() {
        this.allprices = this.$route.query.allprice
        console.log(this.allprices)
  },
};
</script>
<style lang="less" scoped>
.top {
  padding: 10px 0 20px;
}
.title {
  font-size: 18px;
  padding: 10px 0;
}
.el-icon-success{
    font-size: 80px;
    color: #1dc779;
    margin-right: 10px;
}
.payoff {
  width: 1240px;
  margin: 0 auto;
  position: relative;
//   background: #fff;
  padding: 20px;
}
.btn-a{
    color: #fff;
}
.cont{
    display: flex;
    justify-content: space-between;
    padding: 50px 40px;
    background: #fff
}
.cont-l{
    display: flex;
    align-items: center;
}
.price{
    color: red;
    font-size: 20px;
}
.bottom{
    margin-top:20px;
    padding: 50px 40px;
    background: #fff
}
.bot-div{
    padding: 10px 0;
}
.pingtai{
    padding: 10px 0;
}
</style>